<template>
    <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName" />
    </svg>
</template>

<script>
export default {
    name: "SvgIcon",
    props: {
        iconClass: {
            type: String,
            required: true,
        },
        className: {
            type: String,
            default: undefined,
        },
    },
    computed: {
        svgClass() {
            let classes = [ 'svg-icon' ];
            if (this.$utils.isNotEmpty(this.className)) {
                classes.push(this.className);
            }
            return classes.join(' ');
        },
        iconName() {
            return `#icon-${ this.iconClass }`;
        },
    },
}
</script>

<style scoped lang="less" rel="stylesheet/less">
.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>
